<template>
  <div class="wrapper">
    <div class="picture">
      <el-carousel trigger="click" height="500px">
        <el-carousel-item v-for="(item,index) in rotations" :key="index">
          <img :src="'api/'+item.pictureUrl" :alt="item.pictureTitle"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="contents">
      <el-row>
        <el-col :span="15">
          <div class="news">
            <div style="display: flex; flex-direction: row">
              <h2 style="text-align: center; color: white; width: 100%">新 闻 事 件</h2>
              <el-button type="text" style="color: white;" @click="getMore('news')">更 多<i
                class="el-icon-d-arrow-right"></i></el-button>
            </div>
            <el-row>
              <el-col :span="8" v-for="(item,index) in newsList" :key="index">
                <el-card body-style="padding: 5px">
                  <a :href="'/#/newsDetails?newsId='+item.newsId" style="text-decoration: none; color: black">
                    <img :src="'api/'+item.imgList[0].imgUrl" class="image">
                    <div class="newsTitle">
                      <span>{{item.theme}}</span>
                    </div>
                  </a>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="notice">
            <div style="display: flex; flex-direction: row">
              <h2 style="text-align: center; color: white; width: 100%">通 知 公 告</h2>
              <el-button type="text" style="color: white;" @click="getMore('notice')">更 多<i
                class="el-icon-d-arrow-right"></i></el-button>
            </div>
            <div class="details">
              <el-card body-style="padding: 10px" class="box-card">
                <ul style="display: list-item">
                  <li v-for="(item,index) in noticeList" :key="index">
                    <a :href="'/#/noticeDetails?noticeId='+item.noticeId"><span style="color: coral">{{item.createTime.substring(5,10)}}</span>
                      {{item.title}}</a>
                  </li>
                </ul>
              </el-card>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
    export default {
        name: "HomePage",
        data() {
            return {
                rotations: [],
                newsList: [],
                noticeList: []
            }
        },
        methods: {
            loadingHomeInfo() {
                this.getRequest('/homePageInfo').then(resp => {
                    if (resp) {
                        this.rotations = resp.rotations;
                        this.newsList = resp.newsList;
                        this.noticeList = resp.noticeList;
                    } else {
                        console.log('获取主页信息失败');
                    }
                })
            },
            getMore(type) {
                if (type === 'news') {
                    this.$router.push('/newsList');
                } else {
                    this.$router.push('/noticeList');
                }
            }
        },
        mounted() {
            this.loadingHomeInfo();
        }
    }
</script>

<style scoped>
  .el-carousel img {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .contents .el-row {
    justify-content: center;
    display: flex;
  }

  .contents button:hover {
    text-decoration: underline;
  }

  .contents a {
    cursor: pointer;
  }

  .el-card {
    text-align: center;
    border-radius: 0;
    height: 100%;
  }

  .el-card img {
    width: 100%;
    height: 200px;
  }

  .news {
    background-color: #0057A7;
  }

  .newsTitle {
    font-size: 15px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .newsTitle span:hover {
    text-decoration: underline;
  }

  .notice {
    background-color: #1eb1ca;
  }

  .box-card {
    text-align: left;
    line-height: 2em;
    padding-bottom: 14px;
  }

  .box-card a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 95%;
    text-decoration: none;
    font-size: 15px;
    color: black;
  }

  .box-card a:hover {
    text-decoration: underline;
  }
</style>
